<template>
	<el-affix :offset="6" style="height:50px; width: 100%;background-color: #efefef;padding-right:10px;">
		<div class="btn-container">
			<el-button type="primary" @click="() => (drawer = true)">
				查看 JSON
			</el-button>
			<el-button type="primary" @click="saveAsPng">
				保存图片
			</el-button>
			<div class="slider">
				<el-button type="primary" icon="el-icon-minus" style="margin-right: 16px; width: 32px"
					@click="zoom -= 0.1" />
				<el-slider v-model="zoom" :marks="marks" :min="0.1" :max="5" :step="0.1" height="200px" />
				<el-button type="primary" icon="el-icon-plus" style="margin-left: 16px; width: 32px"
					@click="zoom += 0.1" />
			</div>
		</div>
	</el-affix>
	<content v-model="data.nodeConfig"></content>
	<el-drawer
	  v-model="drawer"
	  size="500px"
	  class="drawer"
	  :append-to-body="true"
	  :modal="false"
	  :with-header="false">
	  <div style="height: 100vh">
	    <div style="padding: 1px; background-color: #3883fa">
	      <el-button
	        type="primary"
	        plain
	        @click="copyParseJson">
	        复制格式化后的 JSON
	      </el-button>
	      <el-button
	        type="primary"
	        plain
	        @click="copyJson">
	        复制压缩后的 JSON
	      </el-button>
	      <el-button
	        type="primary"
	        plain
	        @click="drawer = false">
	        关闭弹窗
	      </el-button>
	    </div>
	    <json-editor-vue
	      class="editor"
	      language="zh-CN"
	      current-mode="view"
	      v-model="data" />
	  </div>
	</el-drawer>
</template>

<script setup lang="ts">
    import {ref} from 'vue';
	import content from "./content.vue"
	const data = ref({
		id: 1,
		name: '请假审批',
		key: 'k0001',
		nodeConfig: {
			nodeName: '发起人',
			nodeKey: 'flk0001',
			type: 0,
			nodeAssigneeList: [],
			childNode: {
				nodeName: '条件路由',
				nodeKey: 'flk00101',
				type: 5,
				conditionNodes: [
					{
						nodeName: '长期',
						nodeKey: 'flk1001',
						type: 4,
						priorityLevel: 1,
						conditionMode: 1,
						conditionList: [
							[
								{
									label: '请假天数',
									field: 'day',
									operator: '>',
									value: '7'
								}
							]
						],
						childNode: {
							nodeName: '领导审批',
							nodeKey: 'flk0002',
							type: 1,
							setType: 1,
							nodeAssigneeList: [
								{
									id: '360000197302144442',
									name: '何敏'
								}
							],
							examineLevel: 1,
							directorLevel: 1,
							selectMode: 1,
							termAuto: false,
							term: 0,
							termMode: 1,
							examineMode: 1,
							directorMode: 0
						}
					},
					{
						nodeName: '短期',
						nodeKey: 'flk2001',
						type: 4,
						priorityLevel: 2,
						conditionMode: 1,
						conditionList: [],
						childNode: {
							nodeName: '直接主管审批',
							nodeKey: 'flk0003',
							type: 1,
							setType: 2,
							nodeAssigneeList: [],
							examineLevel: 1,
							directorLevel: 1,
							selectMode: 1,
							termAuto: false,
							term: 0,
							termMode: 1,
							examineMode: 1,
							directorMode: 0
						}
					}
				],
				childNode: {
					nodeName: '抄送人',
					nodeKey: 'flk3001',
					type: 3,
					userSelectFlag: true,
					nodeAssigneeList: [
						{
							id: '220000200908305857',
							name: '何秀英'
						}
					]
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.affix-container {
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
	}

	.btn-container {
		display: flex;
		flex-direction: row-reverse;
	}

	.slider {
		margin-left: 16px;
		width: 300px;
		display: flex;
	}

	.el-button {
		margin-right: 20px;
	}
</style>